<template>
	<view>
		<view class="main">
					<view class="Long">
						<wly-tabnav ref="tabnav" :fixed="true" :tabnav="tabnav" @ontype_='ontype'></wly-tabnav>
						<view class="qie">
							<view class="nan" @click="whole" :class="{type:ys1,type2:ys2}" >男</view>
							<i class="xiang">/</i>
							<i class="nv" @click="whole" :class="{type:ys2,type2:ys1}">女</i>
						</view>
						<button class="navv" @click="serch">搜书名、作者、主角,一搜即有</button>
					</view>
					<view class="ko"></view>
					<tujian v-if="type == '0'"></tujian>
					<xinfang v-if="type == '1'"></xinfang>
					<paihang v-if="type == '2'"></paihang>
					<shudan v-if="type == '3'"></shudan>
					<xiaoshu v-if="type == '4'"></xiaoshu>
		</view>
	</view>
</template>

<script>
	import tujian from '../../components/tujian.vue'
	import xinfang from '../../components/xianfang.vue'
	import paihang from '../../components/paihang.vue'
	import shudan from '../../components/shudan.vue'
	import xiaoshu from '../../components/xiaoshu.vue'
	export default {
		components:{
			tujian,
			xinfang,
			paihang,
			shudan,
			xiaoshu
		},
		data() {
			return {
				ys1:true,
				ys2:false,
				type: '0',
				tabnav:[
					{
								type: '0', //状态值
								name: '推荐',
								list: [], //数据
							}, {
								type: '1', //状态值
								name: '新番',
								list: [], //数据
							}, {
								type: '2', //状态值
								name: '排行',
								list: [], //数据
							}, {
								type: '3', //状态值
								name: '书单',
								list: [], //数据
							}, {
								type: '4', //状态值
								name: '小说',
								list: [], //数据
							}
				],
				
			}
		},
		onLoad() {
			
		},
		methods: {
			whole(){
				this.ys1 = !this.ys1,
				this.ys2 = !this.ys2
			},
			
			serch(){
				uni.navigateTo({
					url:'../../new/serch/serch'
				})
			},
			ontype(e){
			    console.log('sdd',e);//
				this.type = e.type
				console.log('type',this.type)
			  }
		}
	}
</script>

<style>
	body{
		background-color: #f6f7f8;
	}
	.main{
		width: 100%;
		display: flex;
		flex-direction: column;
		height: a;
	}
	.Long{
		z-index: 3;
		width: 100%;
		height: 90px;
		position: fixed;
		background-color: #f2f3f5;
		border-bottom: 1px solid #d5d6d8;
		box-shadow: 0px 20px 20px -20px #c7c8ca;
	}
	.qie{
		width: 20%;
		height: 40%;
		background-color: #e67e22;
		position: absolute;
		left: 75%;
		top: 5%;
		border-radius: 50px;
		display: flex;
		flex-direction: row;
	}
	.nan,.nv{
		width: 30%;
		height: 100%;
		text-align: center;
		padding-left: 9px;
		padding-top: 5px;
		color: #ffffff;
	}
	.type{
		font-size: 20px;
	}
	.type2{
		font-size: 16px;
	}
	.xiang{
		color: #ffffff;
		position: absolute;
		left: 30px;
		top: 5px;
	}
	.navv{
		position: fixed;
		top: 45px;
		left: 5%;
		border-radius: 50px;
		width: 90%;
		height: 40px;
		background-color: #e3e4e6;
		color: #8e8f90;
		font-size: 16px;
		padding-left: 15px;
		background-image: url('../../static/ss.png');
		background-repeat: no-repeat;
		background-size: 20px;
		background-position: 10px 10px;
	}
	.ko{
		height: 90px;
		width: 100%;
	}
</style>
